<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="400" title="对接设置">
        <Form :model="data" :label-width="100" :rules="ruleValidate" ref="formCreate">
            <FormItem label="选择耗材" prop="consumables">
               <RemoteCheckbox url="common/select/consumable" v-model="data.consumables"></RemoteCheckbox>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false;">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/modal";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import RemoteCheckbox from "../../../components/form/remoteCheckbox";

    export default {
        name: "consumable",
        mixins: [contentDrawer],
        components: {RemoteCheckbox, RemoteSelect, IForm, IDrawer},
        data() {
            return {
                loading: false,
                data: {},
                ruleValidate: {
                    consumable: [{type: 'array' , message: '格式不正确！'}]
                },
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            getData(){
                this.loading = true;
                this.$http.get(`product/index/${this.props.id}/consumable`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                })
            },
            submit(data) {
                this.validate(data).then(() => {
                    this.$http.post(`product/index/${this.props.id}/consumable`, this.data).then((res) => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
